<template>
    <view class="custom-select-wrapper">
        <view class="filter-wrapper">
            <!-- <template v-if="selectedSalesman">
                <view class="salesman"> 业务员：{{ selectedSalesman.FullName }} </view>
                <view class="line">|</view>
            </template> -->
            <view class="custom">
                <view class="text">客户：</view>
                <view class="name-wrapper flex-s-c" @click="openCustomDrawer">
                    <view class="select-text">{{ getFinalCustom || "请选择客户" }}</view>
                    <uni-icons type="forward" size="30"></uni-icons>
                </view>
            </view>
        </view>
        <uni-drawer ref="showRight" mode="right" :width="320">
            <drawer-container @reset="handleReset" @sure="handleSure">
                <custom-content />
            </drawer-container>
        </uni-drawer>
    </view>
</template>

<script>
import { CHANGE_CUSTOM_SEARCH_VAL, CHANGE_CUSTOM_SELECTED } from "@/store/mutation-type.js"
import customContent from "./custom-content.vue"
import { mapState, mapMutations } from "vuex"

export default {
    components: {
        customContent,
    },
    computed: {
        ...mapState("report", ["selectedSalesman", "selectedCustoms"]),
        getFinalCustom() {
            return this.selectedCustoms.map((item) => item.FullName).toString()
        },
    },
    methods: {
        ...mapMutations("report", [CHANGE_CUSTOM_SEARCH_VAL, CHANGE_CUSTOM_SELECTED]),
        openCustomDrawer() {
            this.$refs.showRight.open()
        },
        handleReset() {
            this[CHANGE_CUSTOM_SELECTED]([])
            this[CHANGE_CUSTOM_SEARCH_VAL]("")
            uni.$emit("resetCustom")
            this.$emit("hanleSure")
        },
        handleSure() {
            this.$refs.showRight.close()
            this.$emit("hanleSure")
        },
    },
}
</script>

<style lang="scss">
.custom-select-wrapper {
    height: 120rpx;
    background-color: $color-white;

    .filter-wrapper {
        display: flex;
        align-items: center;
        height: 100%;
        padding-left: 32rpx;
        font-size: $font-size-28;

        .salesman {
            font-weight: 700;
        }

        .line {
            margin: 0 20rpx;
            color: $app-color-main;
        }

        .custom {
            flex: 1;
            display: flex;
            align-items: center;
            padding-right: 20rpx;

            .text {
                font-weight: 700;
            }

            .name-wrapper {
                flex: 1;
                height: 72rpx;
                padding: 16rpx 32rpx;
                box-sizing: border-box;
                border-radius: 8rpx;
                background-color: $color-gray-5;

                .select-text {
                    @include textOneLine;
                }
            }
        }
    }
}
</style>
